<template>
    <div class="tr basic-ist">
        <!-- 基础数据-->
        <div class="tr-top">
            <div class="left">
                <div class="itm"><el-button :disabled="!permissionData.data['zcnolist-post']"
                        @click="addEv">新增</el-button></div>
            </div>
            <div class="right">
                <div class="itm">
                    <el-input v-model="tableObjData.name" style="width: 240px;" clearable
                        :placeholder="basicList.search.label" />
                </div>
                <div class="itm"><el-button :disabled="!permissionData.data['zcnolist-get']"
                        @click="getEv(true)">查询</el-button></div>
            </div>
        </div>
        <div class="table-content">
            <el-table @row-dblclick="rowDblclickEv" empty-text="暂无数据" border height="100%" :data="tableListData">
                <el-table-column show-overflow-tooltip v-for="itm in basicList.dictData" :key="itm.value" align="center"
                    header-align="center" :prop="itm.value" :label="itm.label" :width="itm.width" />

                <el-table-column show-overflow-tooltip align="center" header-align="center" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" :disabled="!permissionData.data['zcnolist-get']" size="small"
                            @click="updateSelRowEv(scope.row)">
                            修改
                        </el-button>
                        <el-popconfirm placement="left-end" width="220" confirm-button-text="删除" cancel-button-text="取消"
                            icon-color="#626AEF" confirm-button-type="text" title="是否确认永久是删除此数据"
                            @confirm="deleteSelRowEv(scope.row)">
                            <template #reference>
                                <el-button link type="primary" :disabled="!permissionData.data['zcnolist-get']"
                                    size="small">删除</el-button>
                            </template>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="tableObjData.total > 0" :total="tableObjData.total" v-model:page="tableObjData.page"
            v-model:limit="tableObjData.pageSize" @pagination="getEv(true)" />

        <el-dialog :close-on-click-modal="false" draggable v-model="dialogVisible" :title="isAdd == true ? '新增' : '修改'" width="400" :before-close="handleClose">
            <template #header>
                {{ isAdd == true ? '新增' : '修改' }} <span style="font-size: 12px; color: red;">类型暂时仅支持MSSQL/MYSQL</span>
            </template>
            <el-form>
                <el-row>
                    <el-col v-for="itm in basicList.dictData" :key="itm.value" :xs="24" :sm="24" :md="24" :lg="24"
                        :xl="24" class="mb20">
                        <el-form-item v-if="itm.label=='登录密码'"  label-width="100" :label="itm.label">
                            <el-input type="password" :disabled="isAdd == false ? itm.disabled : false" v-model="ruleForm[itm.value]"
                                style="width: 100%" :placeholder="itm.label" />
                        </el-form-item>
                        <el-form-item v-else  label-width="100" :label="itm.label">
                            <el-input :disabled="isAdd == false ? itm.disabled : false" v-model="ruleForm[itm.value]"
                                style="width: 100%" :placeholder="itm.label" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogSuerEv()">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>

import { ref, reactive, onMounted, onActivated } from 'vue'
import { ListGet, ListPost, PkGet, PkPut, PkDelete } from '@/api/setting/dbpool/index.js'
import { permissionStore } from '@/stores/index.js'
import { loadingStore } from '@/stores/index.js'

const loading = loadingStore()
// 权限数据
const permissionData = permissionStore()
const props = defineProps(['basicList'])
const emit = defineEmits(['dbRowBasicList'])
let tableObjData = reactive({
    name: '',
    page: 1,
    total: 0,
    has_next: false,
    has_prev: false,
    pages: 0,
    pageSize: 20
})
const ruleForm = reactive({})
let tableListData = ref([])
let isAdd = ref(true)
let dialogVisible = ref(false)


onMounted(() => {
    getEv()
})

onActivated(() => {

})


// 查询数据
const getEv = async (msg) => {
    loading.loading = true
    try {
        tableObjData[props.basicList.search.value] = tableObjData.name
        tableObjData.basic_value = props.basicList.basic_value
        let arr_data = await ListGet(tableObjData)
        if (arr_data.status != 200) {
            return
        }
        if (msg == true) {
            ElMessage.success('查询成功')
        }
        tableListData.value = arr_data.data.result.data
        tableObjData.total = arr_data.data.result.total
        tableObjData.has_next = arr_data.data.result.has_next
        tableObjData.has_prev = arr_data.data.result.has_prev
        tableObjData.pages = arr_data.data.result.pages
        tableObjData.pageSize = arr_data.data.result.pageSize

    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}
const addEv = () => {
    // Object.keys(ruleForm).forEach(function (key) {
    //     ruleForm[key] = ''
    // })
    props.basicList.dictData.forEach(element => {
        ruleForm[element.value] = element.default?element.default:null
        // ruleForm[element.value] = '123'
        console.log(element.default)
    });
        
    dialogVisible.value = true
    isAdd.value = true
}
// 重置dialogVisible
const resetDialogVisible = () => {
    dialogVisible.value = false
    isAdd.value = true
}
// 关闭出发事件
const handleClose = (done) => {
    isAdd.value = true
    done()
}
// 弹窗确认事件
const dialogSuerEv = async () => {
    if (isAdd.value == true) {
        console.log('新增数据')
        await addDataEv()
    } else {
        console.log('修改数据')
        await updateRowEv()
    }
    dialogVisible.value = false
    isAdd.value = true
}
// 新增数据
const addDataEv = async () => {
    loading.loading = true
    try {

        let addData = JSON.parse(JSON.stringify(ruleForm))
        if ('id' in addData) {
            delete addData.id
        }
        addData.basic_value = props.basicList.basic_value

        // dict_value
        let arr_data = await ListPost(addData)
        if (arr_data.status != 200) {
            return
        }
        props.basicList.dictData.forEach(element => {
            if (element.value == 'value') {
                tableObjData.name = addData.value
            }
        });

        await getEv(false)
        resetDialogVisible()
        ElMessage.success('新增成功')
    } catch (error) {
        ElMessage.error('新增接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 点击修改获取单个数据
const updateSelRowEv = async (row) => {
    loading.loading = true
    try {
        let arr_data = await PkGet(row.id)
        if (arr_data.status != 200) {
            return
        }
        isAdd.value = false
        dialogVisible.value = true
        ruleForm.id = arr_data.data.result.id
        props.basicList.dictData.forEach(element => {
            ruleForm[element.value] = arr_data.data.result[element.value]
        })
    } catch (error) {
        ElMessage.error('获取单个数据接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 修改数据
const updateRowEv = async () => {

    loading.loading = true
    try {
        let arr_data = await PkPut(ruleForm, ruleForm.id)
        if (arr_data.status != 200) {
            return
        }
        props.basicList.dictData.forEach(element => {
            if (element.value == 'value') {
                tableObjData.name = ruleForm.value
            }
        });
        await getEv(false)
        resetDialogVisible()
        ElMessage.success('修改成功')
    } catch (error) {
        ElMessage.error('修改接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 删除数据
const deleteSelRowEv = async (row) => {
    loading.loading = true
    try {
        let arr_data = await PkDelete(row.id)
        if (arr_data.status != 200) {
            return
        }
        await getEv(false)
        ElMessage.success('删除成功')
    } catch (error) {
        ElMessage.error('删除接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 双击行
const rowDblclickEv = (row) => {
    console.log("双击行")
    console.log(row)
    emit("dbRowBasicList", row)
}

</script>

<style lang='less' scoped>
@tr-top-height: 50px;

// .tr {
//     height: 900px;
// }
.basic-ist {
    height: 100%;
}

.tr-top {
    height: @tr-top-height;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right {
        display: flex;
        align-items: center;
    }

    .itm {
        padding-right: 4px;
        box-sizing: border-box;
    }
}

.table-content {
    height: calc(100% - var(--tr-top-height) - var(--tr-page-height));
}

.dialog-content {
    display: flex;
    align-items: center;
    height: 40px;

    .left {
        width: 60px;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
    }
}

/* 自定义表格悬停颜色类 */
:deep(.el-table__cell:hover) {
    cursor: pointer
}
</style>